﻿@{
    Layout = null;
}
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery File Upload Basic Example</title>
    <style>
        .bar {
            height: 18px;
            background: green;
        }

        .file {
            position: relative;
            background: linear-gradient(to right, lightblue 50%, transparent 50%);
            background-size: 200% 100%;
            background-position: right bottom;
            transition: all 1s ease;
        }

            .file.done {
                background: lightgreen;
            }

            .file a {
                display: block;
                position: relative;
                padding: 5px;
                color: black;
            }
    </style>
</head>
<body>
    <h3>基本配置</h3>
    <div>
        <p>需要引入两个前端库</p>
        <ol>
            <li>
                jQuery - v1.7+
            </li>
            <li>
                blueimp-file-upload
            </li>
        </ol>
        <p>
            必须引入的js文件如下：
        </p>
        <p> jQuery.js 位于jQuery库中</p>
        <p>jquery.ui.widget.js jQuery UI widget factory v1.9+ 用于基本文件上传配置（如果引入了jQuery.Ui效果一样）位于buleimp-file-upload库中</p>
        <p>jquery.iframe-transport.js jQuery Iframe Transport plugin 用于不支持XHR文件上传的浏览器 位于blueimp-file-upload库中</p>
        <p>jquery.fileupload.js</p>
    </div>
    <h3>可选</h3>
    <ul dir="auto">
        <li>
            <a href="https://github.com/blueimp/JavaScript-Templates">JavaScript Templates engine</a>
            v3+: Used to render the selected and uploaded files.
        </li>
        <li>
            <a href="https://github.com/blueimp/JavaScript-Load-Image">JavaScript Load Image library</a>
            v2+: Required for the image previews and resizing functionality.
        </li>
        <li>
            <a href="https://github.com/blueimp/JavaScript-Canvas-to-Blob">JavaScript Canvas to Blob polyfill</a>
            v3+:Required for the resizing functionality.
        </li>
        <li>
            <a href="https://github.com/blueimp/Gallery">blueimp Gallery</a> v2+: Used to display the
            uploaded images in a lightbox.
        </li>
        <li><a href="https://getbootstrap.com/" rel="nofollow">Bootstrap</a> v3+: Used for the demo design.</li>
        <li><a href="https://glyphicons.com/" rel="nofollow">Glyphicons</a> Icon set used by Bootstrap.</li>
    </ul>
    <hr />
    <div id="divFileupload">
        <input id="fileupload" type="file" name="files" data-url="/Basic/Upload/" multiple>
    </div>
    <hr />
    <div>
        <h3>fileupload with progressall</h3>
        <input id="fileuploadWithProgressAll" type="file" name="files" data-url="/Basic/Upload/" multiple />
        <div id="progress">
            <div class="bar" style="width: 0%;"></div>
        </div>
    </div>
    <hr />
    <div>
        <h3>fileupload with progress for each file</h3>
        <input id="fileuploadWithProgress" type="file" name="files" data-url="/Basic/Upload/" multiple />
    </div>
    <script src="~/lib/jquery/jquery.min.js"></script>
    @*使用jquery.ui也可以，但是体积要大狠多*@
    <script src="~/lib/blueimp-file-upload/js/vendor/jquery.ui.widget.min.js"></script>
    <script src="~/lib/blueimp-file-upload/js/jquery.iframe-transport.min.js"></script>
    <script src="~/lib/blueimp-file-upload/js/jquery.fileupload.min.js"></script>

    <script>
              $(function () {
                  $('#fileupload').fileupload({
                      dataType: 'json',
                      done: function (e, data) {
                          $.each(data.result.files, function (index, file) {
                              $('<p></p>').text(file.name).appendTo($('#divFileupload')[0]);
                          });
                      }
                  });

                  $('#fileuploadWithProgressAll').fileupload({
                      dataType:'json',
                      done: function(e,data){
                          $.each(data.result.files,function(index,file){
                              $('<p></p>').text(file.name).appendTo(document.body);
                          })
                      },
                       progressall: function (e, data) {
                          var progress = parseInt(data.loaded / data.total * 100, 10);
                          $('#progress .bar').css(
                              'width',
                          progress + '%'
                          );
                       }
                  });

                  $('#fileuploadWithProgress').fileupload({
                      dataType:'json',
                       add: function(e, data) {
                          data.context = $('<p class="file"></p>')
                            .append($('<a target="_blank"></a>').text(data.files[0].name))
                            .appendTo(document.body);
                          data.submit();
                        },
                    progress: function(e, data) {
                      var progress = parseInt((data.loaded / data.total) * 100, 10);
                      data.context.css("background-position-x", 100 - progress + "%");
                    },
                    done: function(e, data) {
                      data.context
                        .addClass("done")
                        .find("a")
                        .prop("href", data.result.files[0].url);
                    }
                  });
              });
    </script>
</body>
</html>